<template>
  <div class="lyric-wrapper" @click="closeLyric">
    <swiper
      class="lyric-wrapper-swiper swiper-no-swiping"
      direction="vertical"
      slidesPerView="auto"
      :centeredSlides="true"
      @swiper="(el) => (swiperInstance = el)"
    >
      <swiper-slide v-for="(item, index) in lyric" :key="index">
        {{ item.lyric }}
      </swiper-slide>
    </swiper>
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs,watch } from "vue";
import { httpService } from "@/core/http";
import api from "@/api";
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue";

export interface IStateProps {
  /** 歌词列表 */
  lyric: Array<{ time: number; lyric: string }>;
  /** swiper实例 */
  swiperInstance: any;
  /** swiper当前索引 */
  currentIndex: number;
}

export default defineComponent({
  name: "BaseLyric",
  props: {
    songId: { type: Number, default: 0 },
    closeLyric: {
      type: Function,
      default: () => new Function(),
      required: true,
    },
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  setup(props) {
    const state = reactive<IStateProps>({
      lyric: [],
      swiperInstance: null,
      currentIndex: 0,
    });
    /** 获取歌词 */
    const getMusicLyric = (id: number) => {
      if (!id) return;
      httpService("GET", api.getLyric, {
        id,
        lv: 1,
        kv: 1,
        tv: -1,
      }).then((res: any) => {
        const words = res?.lrc?.lyric?.split("\n") || ["[00:00.000]暂无歌词"];
        const list = [].concat(words).filter((words) => words);
        state.lyric = list.map((word: string) => {
          const charIndex = word.indexOf(']')+1;
          let time = word.slice(0, charIndex),
            lyric = word.slice(charIndex);
          time = time.slice(1, time.length - 1);
          let min = Number(time.slice(0, 2)),
            sec = Number(time.slice(3, 5)),
            msec = Number(time.slice(6, charIndex-2));
          return {
            time: (min * 60 + sec) * 1000 + msec,
            lyric,
          };
        });
      });
    };
    /** 定位到当前时间的歌词 */
    const positionCurrentTimeLyric = (timeStamp: number) => {
      if (!state.lyric.length || !state.swiperInstance) return;
      let index = state.lyric.length - 1;
      for (let i = 0; i < state.lyric.length - 1; i++) {
        if (
          timeStamp >= state.lyric[i].time &&
          timeStamp < state.lyric[i + 1].time
        ) {
          index = i;
          break;
        }
      }
      if (index !== state.currentIndex) {
        state.currentIndex = index;
        state.swiperInstance.slideTo(index, 300, false);
      }
    };
    getMusicLyric(props.songId);
    watch(()=>props.songId,(newId,oldId)=>{
        if(newId!==oldId){
            getMusicLyric(newId)
        }
    })
    return {
      ...toRefs(state),
      getMusicLyric,
      positionCurrentTimeLyric,
    };
  },
});
</script>

<style lang='scss' scoped>
.lyric-wrapper {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 50px 10px;
  position: relative;
  &::before,
  &::after {
    content: "";
    width: 90%;
    position: absolute;
    left: 50%;
    top: 50%;
    border-top: 0.2px solid #f2f2f21c;
    transform: translate(-50%, -20px);
  }
  &::after {
    transform: translate(-50%, 20px);
  }
  .lyric-wrapper-swiper {
    height: 100%;
    width: 100%;
    color: rgba(255, 255, 255, 0.37);
    :deep() .swiper-slide {
      width: 100%;
      height: auto;
      padding: 10px 0;
      text-align: center;
      &-active {
        color: #fff;
        @include systemTextShaowStyle(0,0,8px);
      }
    }
  }
}
</style>